<template>
    <div class="jietu">
      <div class="content">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
        <div class="box6"></div>
        <div class="box7"></div>
        <div class="box8"></div>
        <div class="box9"></div>
        <div class="box10"></div>
        <div class="box11"></div>
        <div class="box12"></div>
        <div class="box13"></div>
      </div>
    </div>
</template>
  
<script setup>

</script>
<style lang="scss" scoped>
    .jietu{
      .content{
        width: calc(100vw - 260px);
        display:flex;
        flex-wrap: wrap;
        align-items:center;
        padding:10px;
        .box13{
            width: 200px;
            height:200px;
            background-color:#454344;
            clip-path: circle(50% at 50% 50%);
            margin:10px;
        }
        .box12{
            width: 200px;
            height:200px;
            background-color:#da70d6;
            clip-path: polygon(50% 0%, 0% 50%, 0%, 50%);
            margin:10px;
        }
        .box1{
            width: 200px;
            height:200px;
            background-color: aqua;
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            margin-left:10px;
        }
        .box2{
            width: 200px;
            height:200px;
            background-color: red;
            clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
            margin-left:10px;
        }
        .box3{
            width: 200px;
            height:200px;
            background-color: gray;
            clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
            margin-left:10px;
        }
        .box4{
            width: 200px;
            height:200px;
            background-color:green;
            clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
            margin-left:10px;
        }
        .box5{
            width: 200px;
            height:200px;
            background-color:#da70d6;
            clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
            margin-left:10px;
        }
        .box6{
            width: 200px;
            height:200px;
            background-color:lawngreen;
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            margin-left:10px;
        }
        .box7{
            width: 200px;
            height:200px;
            background-color: yellow;
            clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
            margin-left:10px;
        }
        .box8{
            width: 200px;
            height:200px;
            background-color:greenyellow;
            clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
            margin-left:10px;
        }
        .box9{
            width: 200px;
            height:200px;
            background-color:yellowgreen;
            clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
            margin-left:10px;
        }
        .box10{
            width: 200px;
            height:200px;
            background-color:royalblue;
            clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
            margin-left:10px;
        }
        .box11{
            width: 200px;
            height:200px;
            background-color:olivedrab;
            clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
            margin-left:10px;
        }
      }
    }
</style>
